---
title: Explain CSS sprites, and how you would implement them on a page or site.
---

CSS sprites combine multiple images into one single larger image file and uses a combination of CSS `background-image`, `background-position` and `background-size` to select a specific part of the larger image as the desired image.

It used to be a commonly-used technique for icons (e.g. Gmail uses sprites for all their images).

## Advantages

- Reduce the number of HTTP requests for multiple images (only one single request is required per spritesheet). But with HTTP2, loading multiple images is no longer much of an issue.
- Advance downloading of assets that won't be downloaded until needed, such as images that only appear upon `:hover` pseudo-states. Blinking wouldn't be seen.

## How to implement

1. Use a sprite generator that packs multiple images into one and generate the appropriate CSS for it.
1. Each image would have a corresponding CSS class with `background-image` and `background-position` properties defined.
1. To use that image, add the corresponding class to your element.

The generated stylesheet might look something like:

```css
.icon {
  background-image: url('https://example.com/images/spritesheet.png');
  width: 24px;
  height: 24px;
}

.icon-cart {
  background-position: 0 0;
}

.icon-arrow {
  background-position: -24px 0;
}
```

And can be used in the HTML as such:

```html
<span class="icon icon-cart"></span>

<span class="icon icon-arrow"></span>
```

## References

- [Implementing image sprites in CSS - CSS: Cascading Style Sheets | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS)
